<template>
  <div class="lyricsDetail">
    <div class="bg"></div>
    <div class="page">
      <div class="price">
        <div class="paycont">
          <div class="num">
            <span>查看全部：</span>
            <span class="t1">￥200</span>
          </div>
          <div class="paybtn" @click="submit">支付</div>
        </div>
        <div class="back" @click="back">返回歌词</div>
      </div>
      <div class="top">
        <div class="title">
          <span>这，就是爱</span>
          <div class="tips">智能合约</div>
        </div>
        <div class="cont">
          <div class="left">
            <div class="label">作者：我是倪妮呀</div>
            <div class="label">类型：歌词</div>
            <div class="label">购买金额：150</div>
            <div class="label">更新于：2021-11-14</div>
          </div>
          <div class="right">
            <div class="label">
              作者ID：<br /><span
                >0xcd8668b3de2447d9a71b8dd1bb702cd8585f6f04</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="detail">
        <h4>歌词详情</h4>
        <div class="cont">
          可能回忆掉进了大海<br />

          可能有些往事回不来<br />

          可能岁月会偷走等待<br />

          爱了 很久<br />

          也许 会分开<br />

          我们一同喜欢着现在<br />

          我们曾经被别人取代<br />

          我们都有类似的遗憾<br />

          所以 一起<br />

          漂流在 人海<br />

          挥不去的阴霾<br />

          让我为你掩埋<br />

          哭了一晚的你的样子<br />

          从此都种在我的脑海<br />

          月亮下的对白<br />

          单纯的像小孩<br />

          你有好几次问我<br />

          那是什么<br />

          这就是爱<br />

          这就是爱<br />

          这就是爱<br />

          这就是爱<br />

          这就是爱<br />

          以为得到时间的青睐<br />

          以为旅途没有意外<br />

          以为每天都会说晚安<br />

          但是 有你<br />

          就没有 不安<br />

          ......
        </div>
      </div>
    </div>
    <PayPage :payData="payData" ref="payPage"></PayPage>
  </div>
</template>
<script>
import PayPage from "@/components/pay";
import { TradeInfoAdd } from "@/api/TradeInfo";
export default {
  components: {
    PayPage,
  },
  data() {
    return {
      payData: {},
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
    submit() {
      this.payData = {
        scriptWritingId: "1",
        scriptWritingTitle: "作品名称",
        tradeId:
          "0xfe4b86625f48582013337fb454a5cb0b025d60a16a8fe765ec8d80bb99a64309",
        vendorUserId: "2",
        vendorID:
          "0xfe4b86625f48582013337fb454a5cb0b025d60a16a8fe765ec8d80bb99a64309",
        price: "150",
        tradeState: "1",
      };
      TradeInfoAdd(this.payData).then((res) => {
          this.$refs.payPage.dialogVisible = true
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.lyricsDetail {
  position: relative;
  margin-top: -20px;
  .bg {
    position: absolute;
    height: 240px;
    background: #2eb0c6;
    top: 0;
    left: 0;
    right: 0;
  }
  .page {
    position: relative;
    top: 0;
    background: transparent;
    .top {
      padding-top: 50px;
      color: #fff;
      .title {
        font-size: 24px;
        font-weight: bold;
        display: flex;
        .tips {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid #ffffff;
          border-radius: 4px;
          font-weight: bold;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          width: 82px;
          height: 32px;
          margin-left: 24px;
        }
      }
      .cont {
        margin-top: 34px;
        display: flex;
        .left {
          line-height: 30px;
        }
        .right {
          width: 204px;
          margin-left: 100px;
          span {
            word-wrap: break-word;
            text-decoration: underline;
            line-height: 28px;
            padding-top: 10px;
          }
        }
      }
    }
  }
  .detail {
    margin: 30px;
    h4 {
      font-size: 18px;
      color: #333333;
      margin-bottom: 20px;
    }
    .cont {
      height: 500px;
      overflow: auto;
      color: #666666;
      line-height: 24px;
      font-size: 14px;
    }

    .cont::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    .cont::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #a3a5a5;
    }
    .cont::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      background: #fff;
    }
  }
  .price {
    position: absolute;
    top: 80px;
    width: 309px;
    right: 0;
    .paycont {
      background: #ffffff;
      box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
      border-radius: 4px;
      padding: 45px 20px;
      .num {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-weight: bold;
          color: #4c4c4c;
          font-size: 16px;
          &.t1 {
            color: #ff4444;
            font-size: 24px;
          }
        }
      }
      .paybtn {
        height: 46px;
        background: #2eb0c6;
        border-radius: 4px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        line-height: 46px;
        margin-top: 30px;
        cursor: pointer;
      }
    }
    .back {
      background: #ffffff;
      border: 1px solid #2eb0c6;
      box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #2eb0c6;
      margin-top: 10px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }
  }
}
</style>